<!--
 * @Description: 字典明文
 * @Author: DHL
 * @Date: 2022-01-19 11:28:37
 * @LastEditors: DHL
 * @LastEditTime: 2022-10-24 15:19:00
-->
<template>
  <el-tag :type="dicObj.cssName" v-if="showTag">
    {{ dicObj[valueKey] }}
  </el-tag>
  <span v-else>
    {{ dicObj[valueKey] }}
  </span>
</template>

<script setup lang="ts">
  import { useCacheData } from '/@/hooks/web/cacheData'
  import { stringUtils } from '/@/utils/stringUtils'

  const { getDicObj } = useCacheData()

  interface Props {
    /**
     * 字典KEY[TYPE_CODE]
     */
    dicKey: Nullable<string>

    /**
     * 字典值VALUE[DATA_VALUE]
     */
    dicValue: Nullable<string>

    /**
     * 显示类型
     */
    type?: string

    /**
     * 显示字典那个字段值
     */
    valueKey?: string
  }

  const props = withDefaults(defineProps<Props>(), {
    dicKey: null,
    dicValue: null,
    type: 'tag',
    valueKey: 'dataName'
  })

  /**
   * 字典对象
   */
  const dicObj = computed(() => {
    if (props.dicKey && props.dicValue) {
      const obj = getDicObj(props.dicKey, props.dicValue)
      if (obj) {
        if (obj.cssName === 'primary') {
          obj.cssName = ''
        }
        return obj
      }
    }

    return { dataName: '', cssName: '' }
  })

  /**
   * 是否显示tag标签
   */
  const showTag = computed(() => {
    return (
      props.type === 'tag' &&
      dicObj.value.cssName !== 'default' &&
      stringUtils.isNotEmpty(dicObj.value.dataName)
    )
  })
</script>
